<template>
  <div class="kezipage">
    <el-row class="topInfo">
      <el-col :span="6"> 状态：{{rowData.status_name}} </el-col>
      <el-col :span="6"> 渠道：{{rowData.source_channel}} </el-col>
      <el-col :span="6"> 类型：{{rowData.type_name}} </el-col>
      <el-col :span="6"> 手机：{{rowData.kz_phone}} </el-col>
      <el-col :span="6"> 创建员工：{{employee_name}} </el-col>
      <el-col :span="6"> 邀约员工：{{employee_name}} </el-col>
      <el-col :span="6"> 创建时间：{{rowData.create_time}} </el-col>
      <!-- <el-col :span="6"> 订单时间：{{rowData.order_time}} </el-col> -->
      <!-- <el-col :span="6"> 订单金额：{{rowData.price}} </el-col> -->
      <!-- <el-col :span="6"> 已收金额：{{rowData.amount_paid}} </el-col> -->
      <!-- <el-col :span="6"> ERP：已同步 </el-col> -->
      <el-col :span="6"> ID：{{rowData.kz_id}} </el-col>
    </el-row>
    <el-row class="contentInfo">
      <div class="tabsdiv">
        <Tabs :value="name" @on-click="handleEditTabClick" :animated="false" name="2">
            <TabPane tab="2" label="邀约" name="yaoyue" icon="ios-globe-outline">
              <Invitation @queryALlKz="handleQueryALlKz"></Invitation>
            </TabPane>
            <TabPane tab="2" label="门店" name="mendian" icon="md-home">
              <Store @queryALlKz="handleQueryALlKz" :storeEmployeeList="storeEmployeeList"></Store>
            </TabPane>
            <TabPane tab="2" label="跟踪记录" name="genzongjilu" icon="ios-bookmark-outline">
              <TrackRecord :ptrackList="trackList"></TrackRecord>
            </TabPane>
            <TabPane tab="2" label="编辑" name="bianji" icon="ios-create-outline">
              <Edit @queryALlKz="handleQueryALlKz"></Edit>
            </TabPane>
            <!-- <TabPane tab="2" label="费用" name="feiyong" icon="ios-cash-outline">
              <Fee></Fee>
            </TabPane> -->
            <TabPane tab="2" label="日志" name="rizhi" icon="logo-buffer">
              <Log :plogList="logList"></Log>
            </TabPane>
            <!-- <TabPane tab="2" label="接单 🔗" name="jiedan"> 接单 </TabPane> -->
            <Dropdown slot="extra">
              <a href="javascript:void(0)">
                  操作
                  <Icon type="ios-arrow-down"></Icon>
              </a>
              <DropdownMenu slot="list">
                  <DropdownItem>分配</DropdownItem>
              </DropdownMenu>
          </Dropdown>
        </Tabs>
      </div>
    </el-row>
  </div>
</template>

<script>
  import { mapGetters } from "vuex";
  import { getKzChangeLog, getKzTrackingLogApi } from '@/api/kz/index'
  import { getEmployee } from '@/api/common.js'
  import Invitation from './tabs/Invitation.vue'
  import Edit from './tabs/Edit.vue'
  import TrackRecord from './tabs/trackRecord.vue'
  import Log from './tabs/log.vue'
  import Fee from './tabs/fee.vue'
  import Store from './tabs/store.vue'
  export default {
    components: {
      Invitation,
      Edit,
      TrackRecord,
      Log,
      Fee,
      Store
    },
    computed: {
      ...mapGetters(["employee_name"]),
    },
    data() {
      return {
        name: 'yaoyue',
        rowData: {},
        logList: [],
        trackList: [],
        storeEmployeeList: [],
        userInfo: {},
      }
    },
    watch: {
      '$store.state.layout.app.rowData'(newValue, oldValue) {
        this.rowData = newValue
        for (let key in this.rowData) {
          if (this.rowData[key] == null || this.rowData[key] == "null") {
            this.rowData[key] = ""
          }
        }
      }
    },
    created() {
      this.rowData = this.$store.state.layout.app.rowData
      for (let key in this.rowData) {
        if (this.rowData[key] == null || this.rowData[key] == "null") {
          this.rowData[key] = ""
        }
      }
      this.userInfo = JSON.parse(localStorage.getItem('USERINFO'))
    },
    methods: {
      handleQueryALlKz() {
        this.$emit('queryALlKzkezi')
      },
      handleEditTabClick(val) {
        console.log(val);
        if (val == 'rizhi') {
          this.getKzChangeLog()
        } else if (val == 'genzongjilu') {
          this.getKzTrackingLog()
        } else if (val == 'mendian') {
          this.getCateEmployee()
        }
      },
      // 根据条件检索员工信息
      getCateEmployee() {
        getEmployee({
          position_id: this.userInfo.position_id
        }).then(res => {
          console.log('根据条件检索员工信息', res);
          if (res.rstpCode === '0000') {
            this.storeEmployeeList = res.data
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      },
      getKzChangeLog() {
        getKzChangeLog({
          kz_id: this.rowData.kz_id
        }).then(res => {
          if (res.rstpCode === '0000') {
            this.logList = res.data
          }
        })
      },
      getKzTrackingLog() {
        getKzTrackingLogApi({
          kz_id: this.rowData.kz_id
        }).then(res => {
          if (res.rstpCode === '0000') {
            this.trackList = res.data
          }
        })
      }
    },
  }
</script>

<style scoped lang="less">
.kezipage {
  height: 63vh;
  // padding: 0 15px;
  .topInfo {
    padding: 5px 10px;
    font-size: 12px;
    color: #888;
    border-bottom: 1px solid #eee;
    .el-col {
      margin-bottom: 8px;
    }
  }
}
</style>
